<template>
	<view class="content">
		<view class="logo">
			<image src="../../static/icon/logo2.png" mode=""></image>
			<text>双猴Farm</text>
		</view>
		<!-- 轮播图 start-->
		<view class="swiper1">
			<swiper class="swiper1_1" :autoplay="true" :interval="3000" :duration="1000" circular >
				<swiper-item v-for="item of banner" :key='item.id'>
					<view class="swiper1-item">
						<image :src="item.url" ></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图 end-->
		<!-- 公告start -->
		<view class="notice"  @tap="jumpNotice">
			<image src="../../static/icon/lingdan.png" mode=""></image>
			<text>{{title}}</text>
		</view>
		<!-- 公告end -->
		<!-- 三剑客start -->
		<view class="threeGo">
			<view class="threeItem" @tap="jumpPages(item.gogo)" v-for="(item,index) of threeGo" :key="index">
				<image :src="item.imgUrl"  ></image>
				<view class="threeItemTit">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 三剑客end -->
		<!-- 三盒子start -->
		<view class="threebox">
			<view class="box1" @click="tiaozongsuanli">
				<view class="title1">
					总算力
				</view>
				<view class="title2">
					{{total_tnum}}T
				</view>
			</view>
			<view class="box2">
				<view class="boxItem" @click="tiaozongshouyi">
					<view class="title1">
						总收益(FIL)
					</view>
					<view class="title2">
						{{total_profit}}
					</view>
				</view>
				<view class="boxItem">
					<view class="title1">
						总质押(FIL)
					</view>
					<view class="title2">
						{{total_pledge}}
					</view>
				</view>
			</view>
			<view class="box3">
				<view class="boxItem">
					<view class="title1">
						总存储(T)
					</view>
					<view class="title2">
						{{total_store}}
					</view>
				</view>
				<view class="boxItem">
					<view class="title1">
						账户总余额(FIL)
					</view>
					<view class="title2">
						{{fil}}
					</view>
				</view>
			</view>
		
		</view>
		<!-- 三盒子end -->
		<!-- 二盒子start -->
		<view class="erhezi">
			<view class="erheziItem">
				<view class="erhezirow1">
					存储写入量
				</view>
				<view class="erhezirow2">
					存储写入量{{write_store}} TB
				</view>
				<view class="erhezirow3">
					预计{{over_day}}天写入完成
				</view>
				<view class="jindutiao">
					 <progress  :percent="over_per" border-radius="8" show-info stroke-width="8" />
				</view>
			</view>
			<view class="erheziItem">
				<view class="erhezirow1">
					消耗账户剩余
				</view>
				<view class="erhezirow2">
					消耗账户剩余{{consume_fil}}
				</view>
				<view class="erhezirow3">
					
					<text v-if="consume_per>=100">预计{{consume_over_day}}天消耗完</text>
					<text v-else-if="consume_per>=0&&consume_per<100" style="color: red;">账户余额不足请及时充值</text>
					<text v-else style="color: red;">账户已欠费请及时充值</text>
				</view>
				<view class="jindutiao">
					 <progress v-if="consume_per>=0"  :percent="consume_per" border-radius="8" show-info stroke-width="8" />
					 <view class="jinbutiaofude"  v-else>
					 	<view class="jindutiaokong">
					 	</view>
						<text class="fude">{{consume_per}}%</text>
					 </view>
				</view>
			</view>
		</view>
		<!-- 二盒子end-->
		<!-- 底部盒子start -->
		<view class="bottombox">
			<view class="bottomboxtitle">
				昨日数据
			</view>
			<view class="row">
				<view class="row1">
					<view class="rowdata">
						{{yesterday_profit}}
					</view>
					<view class="rowtitle">
						收益(FIL)
					</view>
				</view>
				<view class="row2">
					<view class="rowdata">
						{{yesterday_pledge}}
					</view>
					<view class="rowtitle">
						质押(FIL)
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="row">
				<view class="row1">
					<view class="rowdata">
						{{yesterday_time}}
					</view>
					<view class="rowtitle">
						时空证明(Gas)
					</view>
				</view>
				<view class="row2">
					<view class="rowdata">
						{{yesterday_gas}}
					</view>
					<view class="rowtitle">
						封装算力(Gas)
					</view>
				</view>
				
			</view>
			<!-- 中间圆圈 -->
			<view class="quan1">
				<view class="quan2">
					<view class="rowdata">
						{{yesterday_tnum}}
					</view>
					<view class="rowtitle">
						新增算力(T)
					</view>
				</view>
			</view>
		</view>
		<!-- 底部盒子end -->
		<!-- 更新APP区域 start-->
		<view v-if="is_update" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:100000;background: rgba(0,0,0,0.7);display: flex;">
			<view style="width:400rpx;margin:0 auto;align-self: center;border-radius:10rpx;background:#FFFFFF;">
				<view style="width:100%;height:200rpx;background: #007AFF;color:#FFFFFF;border-top-left-radius:10rpx;border-top-right-radius:10rpx;">
					<view style="width:360rpx;margin: 0 auto;">
						<view style="height:25rpx;"></view>
						<view style="font-size:20px;">APP版本更新</view>
						<view style="margin-top:15rpx;">更新版本：{{app_version}}</view>
					</view>
				</view>
				<view style="width:100%;">
					<view style="width:360rpx;margin:0 auto;">
						<view style="height:20rpx;"></view>
						<view style="font-size:12px;color:#575757">{{app_version_content}}</view>
						<view style="height:20rpx;"></view>
					</view>
				</view>
				<view @tap="godownapp" style="margin:50rpx auto;width:300rpx;height:60rpx;line-height: 60rpx;border-radius:50rpx;text-align: center;background: #007bFF;color:#FFFFFF;">立即更新</view>
			</view>
		</view>
		<!-- 更新APP区域 end-->
		<view class="tishi" v-if="is_fude">
			<view class="tishibox">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner:[],
				title:'',
				threeGo:[
					{
						imgUrl:'../../static/icon/shouyi.png',
						title:'收益统计',
						gogo:'../shouyitongji/shouyitongji?currentIndex=0'
					},
					{
						imgUrl:'../../static/icon/qianbao.png',
						title:'我的钱包',
						gogo:'../qianbao/qianbao'
					},
					{
						imgUrl:'../../static/icon/jiejuefangan.png',
						title:'集群方案',
						gogo:'../jiqun/jiqun'
					}
				],
				total_tnum:'',
				total_profit:'',
				total_pledge:'',
				total_store:'',
				fil:'',
				write_store:'',
				over_day:'',
				over_per:0,
				consume_fil:'',
				yesterday_profit:0,
				yesterday_pledge:0,
				yesterday_time:0,
				yesterday_gas:0,
				yesterday_tnum:0,
				is_update:false,
				app_version:'',
				app_version_content:'',
				app_version_down_url:'',
				consume_per:0,
				consume_over_day:'',
				is_fude:true,
				
			}
		},
		onShow() {
			this.getinfo()
			this.getappversion()
		},
		methods: {
			getinfo(){
				var tt=this
				var token =uni.getStorageSync('token')
				if(token==''||token==null){
					uni.reLaunch({
					    url:'../login/login'
					})
				}else{
					this.http({
					 	url:'/api/Page/index',
					 	method:'POST',
						header:{
							'token':token
						},
					 	success:(res)=>{
							console.log(res)
							
							tt.banner = res.data.banner
							if(res.data.notice !=''){
								tt.title =res.data.notice.title
							}
							tt.total_tnum = res.data.total_tnum
					 		tt.total_profit = res.data.total_profit
							tt.total_pledge = res.data.total_pledge
							tt.total_store = res.data.total_store
							tt.fil = res.data.fil
							tt.write_store = res.data.write_store
							tt.over_day = res.data.over_day
							tt.yesterday_profit = res.data.yesterday_profit
							tt.yesterday_pledge = res.data.yesterday_pledge
							tt.yesterday_time = res.data.yesterday_time 
							tt.yesterday_gas = res.data.yesterday_gas 
							tt.yesterday_tnum = res.data.yesterday_tnum
							tt.consume_over_day = res.data.consume_over_day
							if(res.data.over==''){
								tt.over_per = 0
							}else{
								tt.over_per = res.data.over_per
							}
							tt.consume_fil = res.data.consume_fil
							tt.consume_per = res.data.consume_per 
							if(res.data.consume_per<0){
								uni.showModal({
									 title: '温馨提示',
									    content: '您的账户已欠费！请及时充值',
										showCancel:false,
									    success: function (res) {
									        if (res.confirm) {
									            console.log('用户点击确定');
												
									        } 
									    }
								})
							}
						},
					 	error:()=>{
					 		uni.showToast({
					 			title:"请求异常"	
					 		})
					 	},
						complete:(res)=>{
							console.log(res.code)
							if(res.code==1201){

								uni.reLaunch({
									url:'../login/login'
								})
							}
						}
					 })
				}
			},
			jumpNotice(){
				uni.navigateTo({
					url:'../notice/notice'
				})
			},
			jumpPages(gogo){
				uni.navigateTo({
					url:gogo
				})
			},
			tiaozongsuanli(){
				uni.navigateTo({
					url:'../shouyitongji/shouyitongji?currentIndex=0'
				})
			},
			tiaozongshouyi(){
				uni.navigateTo({
					url:'../shouyitongji/shouyitongji?currentIndex=1'
				})
			},

			getappversion(){
				var token =uni.getStorageSync('token')
				if(!token){
					uni.reLaunch({
						url:'../login/login'
					})
				}else{
					this.http({
						url:'/api/Ext/appVersion',
						header:{
							'token':token
						},
						success:res=>{
							 // console.log(res)
							this.app_version = res.data.version//版本号
							this.app_version_content = res.data.content//版本内容
							this.app_version_down_url = res.data.down_url//版本下载地址
							console.log('我更新了')
							var version = uni.getStorageSync('version')
							if(version==res.data.version){
								uni.showTabBar({
									animation:true,
								})
							}else{
								uni.hideTabBar({
									animation:true,
								})
								this.is_update = true
							}
						}
					})
				}
			},
			//打开外部浏览器进行下载新的app
			godownapp:function(){
				plus.runtime.openURL(this.app_version_down_url)
			},
		}
	}
</script>

<style lang="scss">
	/deep/.uni-progress-bar{
		border-radius: 8px ;
		overflow: hidden;
		
	}
	/deep/.uni-progress-info{
		font-size: 22rpx;
	}
	
	.content {
		padding-bottom: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		color: #2B2B2B;
		font-weight: 400;
		.logo{
			width: 690rpx;
			display: flex;
			align-items: center;
			image{
				width: 65rpx;
				height: 53rpx;
			}
			text{
				
				height: 33rpx;
				font-size: 35rpx;
				margin-left: 10rpx;
				font-weight: bold;
				color: #0072FF;
				line-height: 33rpx;
			}
		}
		.swiper1{
			width: 690rpx;
			height: 350rpx;
			border-radius: 10rpx;
			overflow: hidden;
			margin:30rpx auto;
			.swiper1_1{
				width: 690rpx;
				height: 350rpx;
				.swiper1-item{
					image{
						width: 690rpx;
						height: 350rpx;
					}
				}
			}
			
		}
		.notice{
			width: 660rpx;
			height: 60rpx;
			margin: 20rpx auto 40rpx auto;
			background: #FFFFFF;
			box-shadow: 0px 0px 2px 0px rgba(42, 43, 43, 0.18);
			border-radius: 5px;
			display: flex;
			align-items: center;
			padding-left: 25rpx;
			image{
				width: 33rpx;
				height: 35rpx;
			}
			text{
				margin-left: 15rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
		.threeGo{
			width: 690rpx;
			display: flex;
			.threeItem{
				flex: 1;
				text-align: center;
				image{
					width: 76rpx;
					height: 76rpx;
				}
				.threeItemTit{
					font-size: 28rpx;
					font-weight: bold;
					color: #2B2B2B;
				}
			}
		}
		.threebox{
			width: 690rpx;
			margin: 40rpx auto 69rpx auto;
			display: flex;
			justify-content: space-between;
			.box1,.box2,.box3{
				width: 228rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.box1{
				height: 224rpx;
				background-image:url(../../static/icon/bg1.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center ; 
				border-radius: 5px 0px 0px 5px;
				.title1{
					padding-top: 30rpx;
					padding-left: 30rpx;
				}
				.title2{
					margin-top: 10rpx;
					padding-left: 30rpx;
					font-weight: bold;
					
				}
			}
			.box2,.box3{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				line-height: 55rpx;
				.boxItem{
					width: 228rpx;
					height: 110rpx;
					background: #00036A;
					.title1{
						padding-left: 24rpx;
					}
					.title2{
						padding-left: 24rpx;
						font-weight: bold;
					}
				}
			}
			.box3{
				border-radius: 0 5px 5px 0;
				overflow: hidden;
			}
		}
		.erhezi{
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			margin: 0 auto 30rpx auto;
			.erheziItem{
				width: 340rpx;
				height: 280rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 2px 0px rgba(43, 43, 43, 0.18);
				border-radius: 5px;
				.erhezirow1{
					font-size: 30rpx;
					font-weight: bold;
					margin-top: 34rpx;
					margin-left: 31rpx;
				}
				.erhezirow2{
					overflow: hidden;
					white-space: nowrap;
					width: 280rpx;
					font-size: 26rpx;
					margin-top: 53rpx;
					margin-left: 31rpx;
				}
				.erhezirow3{
					font-size: 26rpx;
					margin-top: 19rpx;
					margin-left: 31rpx;
				}
				.jindutiao{
					width: 293rpx;
					margin: 20rpx auto;
					color: #0072FF;
					.jinbutiaofude{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						.jindutiaokong{
							width: 240rpx;
							height: 16rpx;
							background: #ebebeb;
							border-radius: 8rpx;
							margin-right: 10rpx;
						}
						.fude{
							color: #C0C0C0;
						}
					}
				}
			}
		}
		.bottombox{
			width: 690rpx;
			height: 400rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 2px 0px rgba(43, 43, 43, 0.18);
			border-radius: 5px;
			margin: 0 auto;
			position: relative;
			.bottomboxtitle{
				font-size: 30rpx;
				font-weight: bold;
				padding-top: 30rpx;
				margin-left: 32rpx;
				margin-bottom: 72rpx;
			}
			.row{
				width: 628rpx;
				margin-left: 32rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-weight: bold;
				.row2{
					text-align: right;
				}
				.rowdata{
					
					color: #0072FF;
					
				}
				.rowtitle{
					color: #2B2B2B;
				}
			}
			.line{
				width: 690rpx;
				height: 1rpx;
				background: #CCCCCC;
				margin: 30rpx auto;
			}
			.quan1{
				position: absolute;
				top:137rpx;
				left: 239rpx;
				width: 213rpx;
				height: 213rpx;
				background: #F0F0F0;
				border-radius: 50%;
				.quan2{
					width: 166rpx;
					height: 166rpx;
					background: #FFFFFF;
					box-shadow: 0px 0px 2px 0px rgba(204, 204, 204, 0.18);
					border-radius: 50%;
					position: absolute;
					top:23rpx;
					left: 23rpx;
					font-size: 28rpx;
					font-weight: bold;
					.rowdata{
						position: absolute;
						text-align: center;
						top:50rpx;
						left: 43rpx;
						color: #0072FF;
						width: 80rpx;
						overflow: hidden;
						
						
					}
					.rowtitle{
						font-size: 24rpx;
						position: absolute;
						top:93rpx;
						left: 21rpx;
						color: #2B2B2B;
						
					}
				}
			}
		}
	}

	
</style>
